<template>
    <div :class="{
            'app-control-form__group': true,
            [`app-control-form__group__${name}`]: true,
			'app-control-form__group--caption': showCaption,
			[`anchor__${name}`]: enableAnchor,
			[slotClass ? slotClass : '']: true,
		}">
    	<a-card
            :bodyStyle="slotStyle"
            :bordered="false"
            size="small">
            <template v-if="showCaption" #title>
                <p class="app-control-form__group__title" :class="labelCssName">
                    <template v-if="titleBarCloseMode !== 0">
                        <down-circle-outlined
                            v-if="showContent"
                            @click="handleContentShowStatusChange"
                        />
                        <right-circle-outlined
                            v-else
                            @click="handleContentShowStatusChange"
                        />
                    </template>
                    <AppIconText :iconClass="iconClass" :imgPath="imgPath" :text="title" />
                </p>
            </template>
            <template v-if="showCaption" #extra>
                <template v-if="uIActionGroup">
                    <template v-if="Object.is(uIActionGroup.extractMode, 'ITEMS')">
                        <a-dropdown>
                            <a class="app-control-form__group__action" @click.prevent>
                                {{ uIActionGroup.caption }}
                            </a>
                            <template #overlay>
                                <a-menu @click="handleMenuGroupAction">
                                    <template v-for="item in uIActionGroup.details">
                                        <a-menu-item
                                            v-if="item.visible"
                                            :key="item.uIActionTag"
                                            :disabled="item.disabled"
                                        >
                                            <AppIconText
                                                :iconClass="item.showIcon && item.iconClass"
                                                :imgPath="item.showIcon && item.imgPath"
                                                :text="item.caption"
                                            />
                                        </a-menu-item>
                                    </template>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </template>
                    <template v-else>
                        <span v-for="(item, index) in uIActionGroup.details" :key="index">
                            <span v-if="index > 0" class="separator">|</span>
                            <AppButton
                                v-show="item.visible"
                                type="link"
                                :disabled="item.disabled"
                                @click="(event:MouseEvent)=>handleGroupAction(event, item)"
                            >
                                <AppIconText
                                    :iconClass="item.showIcon && item.iconClass"
                                    :imgPath="item.showIcon && item.imgPath"
                                    :text="item.showCaption && item.caption"
                                />
                            </AppButton>
                        </span>
                    </template>
                </template>
                <template v-if="showMoreMode == 2 && showMoreItems.length > 0">
                    <a class="app-control-form__group__more" @click="doManageContainer">
                        {{ manageContainerStatus ? $t('widget.editform.hiddenfields') : $t('widget.editform.showfilelds') }}
                    </a>
                </template>
            </template>
            <AppRow v-if="showContent" :layoutOpts="layoutOpts">
                <slot></slot>
            </AppRow>
        </a-card>
    </div>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
import { AppRow } from '@/components/common/row';
import { DownCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { IEvent, IParam } from '@/core';
import { formGroupProps } from '../form';
const props = defineProps(formGroupProps);

let manageContainerStatus = ref(true);

interface ComponentEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<ComponentEmit>();

const handleGroupAction = (event: MouseEvent, action: IParam) => {
	emit('component-action', {
		name: props.name,
		action: 'formGroupAction',
		data: {
			event,
			logic: {
				name: props.name,
				actionTag: action.uIActionTag,
				actionDECodeName: action.actionDECodeName,
				predefinedType: action.predefinedType,
			},
		},
	});
};

//  显示内容区
const showContent: Ref<boolean> = ref(
	props.titleBarCloseMode === 2 ? false : true
);

const handleMenuGroupAction = ($event: IParam) => {
	if (props.uIActionGroup && props.uIActionGroup.details?.length > 0) {
		const details = props.uIActionGroup.details;
		const action = details.find((action: IParam) =>
			Object.is(action.uIActionTag, $event.key)
		);
		emit('component-action', {
			name: props.name,
			action: 'formGroupAction',
			data: {
				event: null,
				logic: {
					name: props.name,
					actionTag: action.uIActionTag,
					actionDECodeName: action.actionDECodeName,
					predefinedType: action.predefinedType,
				},
			},
		});
	}
};

//  处理内容显示状态变化
const handleContentShowStatusChange = (event: MouseEvent) => {
	event.stopPropagation();
	showContent.value = !showContent.value;
};

// 操作管理容器
const doManageContainer = (event: MouseEvent) => {
	manageContainerStatus.value = !manageContainerStatus.value;
	emit('component-action', {
		name: props.name,
		action: 'formGroupManage',
		data: manageContainerStatus.value,
	});
};
</script>
